<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>canvas绘图演示</title>
  <style type="text/css">
    #canvas {
      border: 1px solid #ADACB0;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="300" height="300">
    你的浏览器还不支持canvas
  </canvas>
</body>
<script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  //设置对象起始点和终点
  // context.moveTo(10, 10);
  // context.lineTo(200, 200);
  context.fillRect(10, 10, 150, 46)
  //设置样式
  // context.lineWidth = 2;
  // context.strokeStyle = "#F5270B";
  //绘制
  context.stroke();
</script>

</html>